<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card" v-if="!indexFlag">
        <div slot="header" class="clearfix">
          <el-page-header class="title-row" @back="goCenter" content="服务详情"></el-page-header>
          <br />
        </div>
        <!-- <div>
            <el-input placeholder="请输入任务名" style="width:200px"></el-input>
            <el-button type="primary" size="mini" style="margin-left:10px">搜索</el-button>
            <el-table ref="table" :data="detailsTable" style="margin-top:10px">
                <el-table-column type="index" label="序号" width="55"/>
                <el-table-column  label="类型" prop="type" />
                <el-table-column  label="查询状态" prop="status" />
                <el-table-column  label="缺少统计数据" prop="data" />
                <el-table-column  label="规划等待时间" prop="time" />
                <el-table-column  label="内存不足" prop="memory" />
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" @click="indexDetail" >指标详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div> -->
        <div v-for="item in tableList" class="main">
          <el-row>
            <el-col :span="3"><div class="title">{{item.time}}</div></el-col>
            <el-col :span="21">
              <div style="font-size:14px;margin:10px;line-height:20px">{{item.sql}}</div>
              <el-row>
                <el-col :span="8" v-for="val in item.data">
                  <div class="box">
                    <div class="content1">{{ val.value }}</div>
                    <div class="content2">{{ val.key }}</div>
                  </div>
                </el-col>
              </el-row>
              <div class="box" v-if="JSON.stringify(item.type) != '{}'">
                <div class="content1" style="width:14%">{{ item.type.value }}</div>
                <div class="content2" style="width:86%">{{ item.type.key }}</div>
              </div>
            </el-col>
          </el-row>
          <div style="margin-left:85%">
            <el-button type="text" size="mini"  @click="indexDetail">详情</el-button>
            <el-button type="text" size="mini"  v-if="item.status=='impala'">相同yarn池语句查询</el-button>
            <el-button type="text" size="mini"  v-if="item.status=='yarn'">相似MR2语句作业</el-button>
          </div>
        </div>
      </el-card>
      <indicators v-if="indexFlag" @server="server" />
    </div>
  </div>
</template>
<script>
import indicators from './indicators.vue';
  export default {
    components:{indicators},
    props: ['rowData'],
    data() {
      return {
        detailsTable:[
            {
                type:'QUERY',
                status:'FINISHED',
                data:'false',
                time:'1ms',
                memory:'false'
            },
            {
                type:'QUERY',
                status:'EXCEPTION',
                data:'true',
                time:'5ms',
                memory:'false'
            },
            {
                type:'DDL',
                status:'FINISHED',
                data:'false',
                time:'2ms',
                memory:'false'
            },
        ],
        indexFlag:false,
        tableList:[
         {
           time:'2022/10/22 12:00:00--2022/10/22 12:00:00',
           data:[
              {
                value:'用户',
                key:'impala',
              },
              {
                value:'模型名',
                key:'table1'
              },
              {
                value:'数据库',
                key:'default'
              },
              {
                value:'查询类型',
                key:'QUERY'
              },
              {
                value:'Coordinator',
                key:'dcs-demo-cdh1'
              },
              {
                value:'持续时间',
                key:'6ms'
              },
              {
                value:'生成的行',
                key:'1',
              },
              {
                value:"池",
                key:'root.users.hive'
              },
              {
                value:'线程',
                key:'CPU 时间: 0ms'
              },
              {
                value:'读取的HDFS字节',
                key:'222.5KB'
              }
           ],
           type:{},
           sql:'DESCRIBE `cdmdata`.`C90_ywpt_AP1_link_tree_ywpt`',
           status:'impala',
         },
         {
           time:'2022/10/22 13:00:00--2022/10/22 13:00:00',
           data:[
             {
                value:'用户',
                key:'yarn',
              },
              {
                value:'模型名',
                key:'table_01'
              },
              {
                value:'数据库',
                key:'default'
              },
              {
                value:'查询类型',
                key:'DML'
              },
              {
                value:'Coordinator',
                key:'lab-cdh-ylxx0'
              },
              {
                value:'持续时间',
                key:'5.41s'
              },
              {
                value:'生成的行',
                key:'237391',
              },
              {
                value:'应计内存',
                key:'0 byte seconds'
              },
              {
                value:'池',
                key:'root.users.autoflow'
              },
              {
                value:'累积内存使用峰值:',
                key:'15.5 MiB'
              },
              {
                value:'线程',
                key:'CPU 时间: 376ms'
              },
               {
                value:'读取的 HDFS 字节',
                key:"3 MiB"
              },
           ],
           type:{},
           sql:'DROP TABLE IF EXISTS CDMDATA.C03_YJK_KPI_D',
           status:'yarn',
         },
         {
           time:'2022/10/22 14:00:00--2022/10/22 14:00:00',
           data:[
             {
                value:'用户',
                key:'yarn',
              },
              {
                value:'数据库',
                key:'default'
              },
              {
                value:'模型名',
                key:'table_02'
              },
              {
                value:'查询类型',
                key:'DDL'
              },
              {
                value:'Coordinator',
                key:'lab-cdh-ylxx0'
              },
              {
                value:'持续时间',
                key:'1.52s'
              },
           ],
           type:{},
           sql:'select count(1) from CDMDATA.C03_YJK_KPI_D',
           status:'yarn',
         },
         {
           time:'2022/10/22 15:00:00--2022/10/22 15:00:00',
           data:[
             {
                value:'用户',
                key:'hive',
              },
              {
                value:'模型名',
                key:'table_03'
              },
              {
                value:'数据库',
                key:'default'
              },
              {
                value:'查询类型',
                key:'N/A'
              },
              {
                value:'Coordinator',
                key:'lab-cdh-ylxx1'
              },
              {
                value:'持续时间',
                key:'2ms'
              },
           ],
           type:{
              value:'查询状态',
              key:'ParseException: Syntax error in line 4: rigth join ( ^ Encountered: IDENTIFIER Expected: CROSS, FROM, FULL, GROUP, HAVING, INNER, JOIN, LEFT, LIMIT, OFFSET, ON, ORDER, RIGHT, STRAIGHT_JOIN, TABLESAMPLE, UNION, USING, WHERE, COMMA CAUSED BY: Exception: Syntax error'
           },
           sql:'DROP TABLE IF EXISTS CDMDATA.C03_YJK_KPI_H',
           status:'',
         },
        ],
      };
    },
    created(){
        
    },
    methods:{
      goCenter() {
        this.$emit("center",false)
      },
      server(val){
          this.indexFlag=val
      },
      indexDetail(row){
          this.indexFlag=true
      }
    }
  }
</script>
<style scoped>
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}
.content1 {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fafafa;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 14px;
}
.content2 {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 14px;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main{
  margin-top:5px;
  border:1px solid #dedede;
  box-shadow: 2px 1px 7px 1px #cdcdd1;
}
.title{
  font-size: 14px;
  text-align: center;
  margin-top:10px;
  color: #000;
}
</style>